<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view class="top_box">
			<!--顶部背景颜色-->
			<view class="top_bock" :style="{background:topBackColor}"></view>
			<!-- 轮播图 -->
			<view class="banner">
				<uni-swiper-dot :info="banner" :current="current" mode="dot" field="content">
					<swiper class="swiper-box" @change="swiperChange">
						<swiper-item v-for="(item, index) in banner" :key="index">
							<!-- 	<view class="swiper-item" :class="'swiper-item' + index">
							<text style="color: #fff; font-size: 32px;">{{index+1}}</text>
						</view> -->
							<image :src="item.imgUrl"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
		</view>
		<!-- 海报图 -->
		<view class="plc">
			<image src="../../static/adl.png"></image>
		</view>
		<!-- 功能菜单的展示-->
		<uni-grid :column="4" :highlight="true" :showBorder="false" class="group-menu">
			<uni-grid-item v-for="(item, index) in group" :index="index" :key="index">
				<view @click="toGroupPage(item.menuCode)" class="grid-item-box">
					<image :src="item.icon"></image>
					<view>{{item.title}}</view>
					<!-- <text class="text">文本信息</text> -->
				</view>
			</uni-grid-item>
		</uni-grid>
		<!--推荐商品-->
		<view class="fire-name">
			<uni-icons type="fire-filled" color="#ff557f" size="30"></uni-icons>
			<text class="name">推荐商品</text>
		</view>

		<!-- 商品列表(套餐) -->
		<view class="goods-item" v-for="(item,index) in categorieList" :key="item.id">
			<uni-row class="demo-uni-row">
				<uni-col :span="12">
					<image class="goods-pic" :src="item.imgUrl" @click="toGoodsDetail(item.id)"></image>
				</uni-col>
				<uni-col :span="8">
					<view @click="toGoodsDetail(item.id)">
						<view class="goods-table-box"><text class="goods-table">套餐</text>
							<text class="goods-name">{{item.categoryName}}</text>
						</view>
						<view class="goods-text">
							<view style="width: 100%; height: 30upx;line-height: 30upx;">配菜：<text
									style="width: 100upx;  background-color: #fcd39b;color: red;">供12道美食</text></view>
							<view style="width: 100%; height: 30upx;line-height: 30upx; color: red; margin-top: 10upx;">
								评分：4.7</view>
							<view style="width: 100%; height: 30upx;line-height: 30upx; margin-top: 10upx;">月售：99</view>
						</view>

						<view class="goods-price">
							<!-- 		<text>		销售价格：</text> -->
							<text class="salePrice">¥&nbsp;{{item.salePrice}} 预定价格</text>
							<text class="totalPrice">¥{{item.totalPrice}}</text>
						</view>
					</view>

				</uni-col>
				<uni-col :span="4">
					<view class="cart-icon" @click="addGoodsCard(item,'SET_MENU')">
						<image src="../../static/icon_r/gouwuche.png"></image>
					</view>
				</uni-col>
			</uni-row>
			<!-- 	<uni-card>
				<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
			</uni-card> -->
		</view>
		<!-- 商品列表（自选） -->
		<view class="goods-item" v-for="(item,index) in cuisineList" :key="item.id">
			<uni-row class="demo-uni-row">
				<uni-col :span="12">
					<image class="goods-pic" :src="item.imgUrl" @click="toDishDetail(item.id)"></image>
				</uni-col>
				<uni-col :span="8">
					<view @click="toDishDetail(item.id)">
						<!-- <view class="goods-name">{{item.dishName}}</view> -->
						<view class="goods-table-box"><text class="goods-table">单选</text>
							<text class="goods-name">{{item.dishName}}</text>
						</view>
						<view class="goods-text">
							<!-- 		<view style="width: 100%; height: 30upx;line-height: 30upx;">配菜：<text
									style="width: 100upx;  background-color: #fcd39b;color: red;">供12道美食</text></view> -->
							<view style="width: 100%; height: 30upx;line-height: 30upx; color: red; margin-top: 10upx;">
								评分：4.7</view>
							<view style="width: 100%; height: 30upx;line-height: 30upx; margin-top: 10upx;">月售：99</view>
						</view>
						<!-- <view class="goods-text">{{item.describes}}</view> -->
						<view class="goods-price">
							<!-- 		<text>		销售价格：</text> -->
							<text class="salePrice">¥&nbsp;{{item.salePrice}} 预定价格</text>
							<text class="totalPrice">¥{{item.dishPrice}}</text>
						</view>
					</view>

				</uni-col>
				<uni-col :span="4">
					<view class="cart-icon" @click="addGoodsCard(item,'CUISINE')">
						<image src="../../static/icon_r/gouwuche.png"></image>
					</view>
				</uni-col>
			</uni-row>
			<!-- 	<uni-card>
				<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
			</uni-card> -->
		</view>
		<!-- 酒水列表（自选） -->
		<view class="goods-item" v-for="(item,index) in liquorList" :key="item.id">
			<uni-row class="demo-uni-row">
				<uni-col :span="12">
					<image class="goods-pic" :src="item.imgUrl" @click="toDishDetail(item.id)"></image>
				</uni-col>
				<uni-col :span="8">
					<view @click="toDishDetail(item.id)">
						<!-- <view class="goods-name">{{item.dishName}}</view> -->
						<view class="goods-table-box"><text class="goods-table">自选</text>
							<text class="goods-name">{{item.dishName}}</text>
						</view>
						<view class="goods-text">
							<!-- 			<view style="width: 100%; height: 30upx;line-height: 30upx;">配菜：<text
								style="width: 100upx;  background-color: #fcd39b;color: red;">供12道美食</text></view> -->
							<view style="width: 100%; height: 30upx;line-height: 30upx; color: red; margin-top: 10upx;">
								评分：4.7</view>
							<view style="width: 100%; height: 30upx;line-height: 30upx; margin-top: 10upx;">月售：99</view>
						</view>
						<!-- <view class="goods-text">{{item.describes}}</view> -->
						<view class="goods-price">
							<!-- 		<text>		销售价格：</text> -->
							<text class="salePrice">¥&nbsp;{{item.salePrice}} 预定价格</text>
							<text class="totalPrice">¥{{item.dishPrice}}</text>
						</view>
					</view>
				</uni-col>
				<uni-col :span="4">
					<view class="cart-icon" @click="addGoodsCard(item,'LIQUOR')">
						<image src="../../static/icon_r/gouwuche.png"></image>
					</view>
				</uni-col>
			</uni-row>
			<text v-if="loading">
				<text class="loading-text">加载中...</text>
			</text>

			<text v-else-if="isFinished" class="finished-text">
				暂无更多数据 ~
			</text>
			<text v-else class="more-text">
				上拉加载更多
			</text>
			<!-- 	<uni-card>
				<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
			</uni-card> -->
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				loading: false,
				isFinished: false,
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				//背景颜色
				topBackColor: "rgb(225,85,127)",
				// grop:[],
				//背景切换的颜色
				bs: [
					"rgb(225,85,127)",
					"rgb(225,170,127)",
					"rgb(170,0,0)",
					"rgb(0,170,127)",
				],
				//当前背景图的索引
				current: 1,
				//背景图列表
				banner: [],
				//首页列表分类
				group: [],
				//首页菜品套餐
				categorieList: [],
				//首页菜品自选
				cuisineList: [],
				//首页酒水列表
				liquorList: [],
				token: uni.getStorageSync("token"),
				params: {
					current: 1, // 第一页
					pageSize: 10, // 每页十个
					status: '' // 当前状态
				},
				//菜品套餐
				cgTotal: 0,
				dishTotal: 0, //菜品总数
				noData: false, // 没有更多数据了
			}
		},
		// onReachBottom() {
		// 	if (this.params.current < this.dishTotal) {
		// 		this.params.current++;
		// 		uni.setStorageSync('token', this.token);
		// 		// 模拟请求数据的过程
		// 		setTimeout(() => {
		// 			this.queryAppData()
		// 			this.queryUserPermissionList()
		// 			this.queryGroupDish()
		// 		}, 1000);
		// 	}
		// },
		onReachBottom() {
			// 如果正在加载，或者所有数据已加载完毕，则直接返回，避免重复请求
			if (this.loading || this.isFinished) {
				return;
			}

			// 检查是否还有更多数据可加载
			if (this.params.current < this.dishTotal) {
				this.params.current++;
				this.loading = true; // 开始加载，设置状态为true

				// 模拟请求数据的过程
				setTimeout(() => {
					// 在Promise.all中执行您的多个请求
					Promise.all([
						this.queryAppData(),
						this.queryUserPermissionList(),
						this.queryGroupDish()
					]).then(() => {
						// 所有请求成功后，检查是否已加载完全部数据
						// 假设 this.dishTotal 是总页数或总条数，您需要根据实际情况判断
						if (this.params.current >= this.dishTotal) {
							this.isFinished = true; // 标记所有数据加载完毕
						}
					}).catch(err => {
						console.error('加载失败', err);
						// 可选：加载失败提示
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						});
					}).finally(() => {
						this.loading = false; // 无论成功失败，最后都关闭加载状态
					});
				}, 1000);
			} else {
				// 如果没有更多数据了，设置完成状态
				this.isFinished = true;
			}
		},
		methods: {
			...mapMutations(['saveGoodsGroup']),
			...mapActions(['getCartGoodsList']),
			onClick(e) {
				console.log(e)
			},
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			},
			//轮播图切换时执行的方法
			swiperChange(e) {
				//根据背景图索引位置，从bs中获取一个背景色
				this.current = e.detail.current;
				let index = this.current % 4;
				let color = this.bs[index]
				//切换背景图的颜色
				this.topBackColor = color
			},
			addGoodsCard(params, type) {
				if (uni.getStorageSync("token")) {
					const data = {}
					data.customerId = this.$store.state.customer.id
					//验证当前用户是否登录
					if (type === 'SET_MENU') {
						data.categoriesId = params.id
						data.price = params.salePrice
						data.productId = 0
						data.productPrice = params.salePrice
						data.productType = type
						data.quantity = 1
					} else if (type === 'CUISINE') {
						data.productId = params.id
						data.categoriesId = 0
						data.price = params.salePrice
						data.productPrice = params.salePrice
						data.productType = type
						data.quantity = 1
					} else if (type === 'LIQUOR') {
						data.productId = params.id
						data.categoriesId = 0
						data.price = params.salePrice
						data.productPrice = params.salePrice
						data.productType = type
						data.quantity = 1
					}
					//调用加入购物车接口
					// console.log(this.customerCart)
					this.addCustomerCarts(data)
				} else {
					this.$api.user.toLogin()
				}
				// console.log(data)

			},
			//查询轮播图
			async queryAppData() {
				const {
					status,
					data,
					msg
				} = await this.$api.goods.queryAppInfoAction()
				if (status == 200) {
					const result = data
					if (data.length > 0) {
						for (let i = 0; i < data.length; i++) {
							data[i].imgUrl = this.$store.state.url + data[i].imgUrl
						}
					}
					this.banner = data;
				}
			},
			//查询菜单列表
			async queryUserPermissionList() {
				const {
					status,
					data,
					msg
				} = await this.$api.goods.queryRolePermissionListAction("GSM")
				if (status == 200) {
					for (let i = 0; i < data.length; i++) {
						data[i].icon = this.$store.state.url + data[i].icon
					}
					this.group = data
					this.saveGoodsGroup(this.group)
				}
			},
			//查询菜品分类列表
			async queryGroupDish() {
				const {
					status,
					data,
					msg
				} = await this.$api.goods.queryGroupDishAction(this.params)
				this.cgTotal = data.cgTotal
				this.dishTotal = data.dishTotal
				if (status == 200) {
					if (data.categorieList != null && data.categorieList.length > 0) {
						for (let i = 0; i < data.categorieList.length; i++) {
							data.categorieList[i].imgUrl = this.$store.state.url + data.categorieList[i].imgUrl
							this.categorieList.push(data.categorieList[i])
						}
					}
					if (data.cuisineList != null && data.cuisineList.length > 0) {
						for (let i = 0; i < data.cuisineList.length; i++) {
							data.cuisineList[i].imgUrl = this.$store.state.url + data.cuisineList[i].imgUrl
							this.cuisineList.push(data.cuisineList[i])
						}
					}
					if (data.liquorList != null && data.liquorList.length > 0) {
						for (let i = 0; i < data.liquorList.length; i++) {
							data.liquorList[i].imgUrl = this.$store.state.url + data.liquorList[i].imgUrl
							this.liquorList.push(data.liquorList[i])
						}
					}
				}

			},
			///跳转商品详情页
			toGoodsDetail(goodsId) {
				const urls = `/pages/goods/detail?id=${goodsId}`
				uni.navigateTo({
					url: "/pages/goods/datail?id=" + goodsId
				})
			},
			///跳转商品详情页
			toDishDetail(dishId) {
				uni.navigateTo({
					url: "/pages/goods/dishDatail?id=" + dishId
				})
			},
			//跳转到菜单分类页面
			toGroupPage(groupCode) {
				//将分类的id保存都vuex
				uni.setStorageSync("groupCode", groupCode)
				//跳转到分类页面
				uni.switchTab({
					url: '/pages/goods/group'
				})
			},
			//调用购物车接口
			async addCustomerCarts(params) {
				try {
					const {
						status,
						data,
						msg
					} = await this.$api.cart.addCustomerCarts(params)
					if (status == 200) {
						this.getCartGoodsList()
						uni.$u.toast("操作成功!")
					} else {
						uni.$u.toast("操作失败!")
					}

				} catch (e) {
					console.log(e)
				}
			},
			//刷新页面
			onPullDownRefresh() {
				uni.setStorageSync('token', this.token);
				// setTimeout(function() {
				// 	uni.stopPullDownRefresh();
				// }, 1000);
				// uni.showToast({
				// 	title: '刷新成功',
				// 	icon: 'success',
				// 	duration: 2000
				// })
				// uni.showToast({
				//   title: '正在刷新...',
				//   icon: 'loading',
				//   duration: 5000 // 设置一个较长的持续时间，后续我们会手动关闭它
				// });
				uni.stopPullDownRefresh(); // 停止刷新	
			}

		},
		//加载页面执行生命周期的钩子函数
		onLoad() {
			this.getCartGoodsList()
			this.queryAppData()
			this.queryUserPermissionList()
			this.queryGroupDish()
		}
		// onShow(){
		// 	this.queryAppData()
		// 	this.queryUserPermissionList()
		// 	this.queryGroupDish()
		// }
	}
</script>

<style lang="scss">
	.content {
		// padding: 20upx;
		font-size: 14upx;
		line-height: 24upx;
	}

	//顶部区域
	.top_box {
		width: 100%;

		//顶部背景颜色
		.top_bock {
			height: 400upx;
			// background-color: #FA541C;
		}

		//海报banner图
		.banner {
			text-align: center;
			margin-top: -260upx;
			padding: 20upx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}
		}
	}

	//海报图样式
	.plc {
		image {
			width: 100%;
			height: 200upx;
			background-color: white;
		}
	}

	//分类菜单样式
	.group-menu {
		margin-top: 10upx;
		padding: 10upx;
		background-color: white;

		//单个菜单
		.grid-item-box {
			width: 80%;
			text-align: center;
			font-size: 28upx;

			image {
				width: 150upx;
				height: 150upx;
				border-radius: 50%;
				/* 水平半径/垂直半径 */
				// background: #eefeff;

			}
		}
	}

	//推荐商品样式 
	.fire-name {
		font-weight: bold;
		font-size: 30upx;
		color: #ff557f;
		line-height: 80upx;
		height: 80upx;

		.name {
			line-height: 80upx;
		}
	}

	//单个商品样式
	.goods-item {
		margin: 15upx;
		background: #fff;
		height: 300upx;
		border-radius: 10upx;
		font-size: 18upx;

		//商品图
		.goods-pic {
			width: 300upx;
			height: 300upx;
			// height: 100%;
		}

		//商品名称
		.goods-table-box {
			font-size: 26upx;
			// color: red;
			// font-weight: bold;
			margin-top: 10upx;
			// width: 100%;
			height: 30upx;
			line-height: 30upx;

			.goods-table {
				width: 40upx;
				height: 30upx;
				font-size: 25upx;
				background-color: red;
				line-height: 30upx;
				color: white;
				border-radius: 20%;
			}

			.goods-name {
				width: 80upx;
				height: 30upx;
				line-height: 30upx;
				margin-left: 10upx;
			}
		}

		.load-more-status {
			text-align: center;
			padding: 20rpx 0;
			color: #999;
			font-size: 24rpx;
		}

		.loading-text {
			/* 如果您想添加一个旋转动画 */
			/* 需要定义一个旋转的keyframes动画 */
			margin: auto;
			color: #ccc;
			font-size: 25rpx;
			font-weight: 500;
			letter-spacing: 1rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.finished-text {
			color: #ccc;
			font-size: 25rpx;
			width: 100%;
			height: 30upx;
			display: flex;
			flex-direction: column;
			align-items: center;


		}

		.more-text {
			color: #ccc;
			font-size: 25rpx;
			width: 100%;
			height: 30upx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		//商品介绍
		.goods-text {
			font-size: 26upx;
			margin-top: 30upx;
			width: 100%;
			max-height: 210upx;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		//商品价格
		.goods-price {
			// font-size: 25upx;
			// color: red;
			// font-weight: bold;
			width: 100%;
			height: 30upx;
			line-height: 30upx;
			margin-top: 20upx;

			//销售价格样式
			.salePrice {
				font-size: 25upx;
				color: red;
				font-weight: bold;
			}

			.totalPrice {
				text-decoration: line-through;
				font-size: 25upx;
				margin-left: 10upx;
				font-weight: bold;
				color: #9b9b9b;
			}
		}

		//购物车图标
		.cart-icon {
			width: 50upx;
			text-align: center;
			line-height: 300upx;

			image {
				width: 50upx;
				height: 50upx;
				background: #eefeff;
				border-radius: 50%;
			}
		}

	}
</style>